<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/axios.min.js"></script>
    <link rel="stylesheet" href="./css/nav mbx.css">
  <link rel="stylesheet" href="./css/Details page.css">
</head>
<body>

  <div>
    <div class="nav" style="z-index: 99;">
      <ul>
          <li><a href="index.html"><img src="https://www.innisfree.cn/webstatic/images/logo_2ebdcae.png" alt="" style="height: 31px; width: 164px;"></a></li>
          <li>
              <div class="ins-headerUserInfo ins-flex is-align-middle ">
              <span style="margin-right:10px;">Hey,</span>
              <span style="margin-right:10px;">登录</span>
              <span style="color: #898587;">注册</span>
              </div>
          </li>
          <li>
              <div class="ins-headerSearch ins-appHeader__search">
                  <input type="text" name="" class="ipt" placeholder="第四代小绿瓶">
                  <div class="ins-searchBar ins-headerSearch__dialog"></div>
              </div>
          </li>
          <li><a href="javascript:;"><p>购物</p></a></li>
          <li><a href="javascript:;"><p>热门活动</p></a></li>
          <li><a href="javascript:;"><p>发现</p></a></li>
          <li><a href="javascript:;"><p>关于我们</p></a></li>
      </ul>
  </div>
    

  <div class="ins-appPageView__content" style="padding-top: 75px;">
    <div class="wrapper">
      <div class="ins-prdsBreadNav">
        <span onclick="javascript:history.go(-1);" style="cursor: pointer;">←</span><span class="ins-prdsBreadNav__title">HOME</span>
      
      <div class="ins-prdsBreadNavItem is-first">
        <div class="title">
          护肤系列
          <i class="ins-icon icon-down"></i>

        </div>
        <div class="content" style="display: none;">
          <div class="content-scroller">
            <div class="content-item">
              <span>产品类别</span>
            </div>

            <div class="content-item is-active">
              <span>护肤系列</span>
            </div>

            <div class="content-item">
              <span>畅销产品</span>
            </div>

            <div class="content-item">
              <span>特惠专区</span>
            </div>

          </div>
        </div>

      </div>

      <div class="ins-prdsBreadNavItem">
        <div class="title">
          济州石榴
          <i class="ins-icon icon-down"></i>
        </div>

        <div class="content" style="display: none;">
          <div class="content-scroller">
            <div class="content-item">
              <span>红茶青春</span>
            </div>

            <div class="content-item">
              <span>红茶青春</span>
            </div>

            <div class="content-item">
              <span>红茶青春</span>
            </div>

            <div class="content-item">
              <span>红茶青春</span>
            </div>

            <div class="content-item">
              <span>红茶青春</span>
            </div>

            <div class="content-item is-active">
              <span>济州石榴</span>
            </div>

            <div class="content-item">
              <span>红茶青春</span>
            </div>

            <div class="content-item">
              <span>红茶青春</span>
            </div>

            <div class="content-item">
              <span>红茶青春</span>
            </div>

            <div class="content-item">
              <span>红茶青春</span>
            </div>

            <div class="content-item">
              <span>红茶青春</span>
            </div>

            <div class="content-item">
              <span>红茶青春</span>
            </div>

            <div class="content-item">
              <span>红茶青春</span>
            </div>

            <div class="content-item">
              <span>红茶青春</span>
            </div>

            <div class="content-item">
              <span>红茶青春</span>
            </div>

            <div class="content-item">
              <span>红茶青春</span>
            </div>

            <div class="content-item">
              <span>红茶青春</span>
            </div>

            <div class="content-item">
              <span>红茶青春</span>
            </div>

            <div class="content-item">
              <span>红茶青春</span>
            </div>

            <div class="content-item">
              <span>红茶青春</span>
            </div>

          </div>
        </div>

      </div>

    </div>
    <div class="ins-products__banner">
      <img src="https://www.innisfree.cn/staticfiles/image/20/59/d5/df3646981b574253c3e2ca321e.jpg" alt="">
    </div>

    <div class="goodslist">
      <!-- <input type="text" name="" id="" placeholder="图片"> -->
      <!-- <input type="text" name="" id="" placeholder="名字"> -->
      <!-- <input type="text" name="" id="" placeholder="价格"> -->
      <!-- <input type="text" name="" id="" placeholder="内容"> -->
      <!-- <input type="button" name="" id="" value="发布" onclick="updateProduct()" > -->
      <ul>
          <!-- <li>
              <h2></h2>
              <p></p>
              <p></p>
              <p></p>
              <img src="" alt="">
          </li> -->
      </ul>
    </div>

    </div>
  </div>  
  
  <div class="ins-appFooter min-wrapper ins-flex" >
    <div class="ins-appFooter__content">
    <div class="ins-appFooter__left ins-flex__1" style="margin: 150px;">
        <img class="ins-appFooter__logo" src="https://www.innisfree.cn/webstatic/images/logo_white_56c6462.png" alt="logo">
    
        <div class="ins-appFooter__thrid">
            <div class="ins-appFooter__thrid--weibo">
                <img src="	https://www.innisfree.cn/webstatic/images/weibo_74219f1.png" alt="">
            </div>
            <div class="ins-appFooter__thrid--wechat">
                <img src="https://www.innisfree.cn/webstatic/images/wechat_900a937.png" alt="">
            
                <div class="wxShow">
                    <img src="https://www.innisfree.cn/webstatic/images/wx_6ff58d7.png" alt="">
                </div>
            </div>
            <div class="ins-appFooter__thrid--shop">
                <img src="	https://www.innisfree.cn/webstatic/images/shop_fc0fee4.png" alt="">
            
                <div class="ins-appFooter__thrid--shopTip">
                    <div>专卖店导航</div>
                    <div>探店指南</div>
                </div>
            </div>
        </div>

        <div class="ins-appFooter__copyRight">
            <img src="	https://www.innisfree.cn/webstatic/images/copyright_d57b29a.png" alt="">
       
            <div class="ins-appFooter__copyRight--Tip"> copyright@2011 amorerepacific corporation. All rights reserved </div>

        </div>

    </div>

    <div class="ins-appFooter__middle ins-flex__1" style="margin: 200px;">
        <div class="ins-appFooter__middle--qr">
            <img src="	https://www.innisfree.cn/webstatic/images/wechatqr_2ca96da.png" alt="">
            <span>Innisfree公众号</span>
        </div>
        <div class="ins-appFooter__middle--qr">
            <img src="https://www.innisfree.cn/webstatic/images/wechatmp_8888415.png" alt="">
            <span>Innisfree商城小程序</span>
        </div>
    </div>

     <!-- <div class="ins-appFooter__right">
        <div class="ins-appFooter__map clearfix">
            <ul class="ins-appFooter__map1">
                <li class="tt">联系我们</li>
                <li>服务热线：400-920-9238</li>
                <li>服务时间：09:00-21:00 （不含国定假日）</li>
                <li>客服邮箱：innisfree@innisfree.cn</li>
            </ul>
            <ul class="ins-appFooter__map2">
                <li class="tt">会员中心</li>
                <li> 加入会员 </li>
                <li><a href="/faq/vipService"> 会员制度 </a></li>
                <li><a href="/userInfo">我的主页</a></li>
            </ul>
            <ul class="ins-appFooter__map3">
                <li class="tt">客服中心</li>
                <li><a href="/faq/index">公告板</a></li>
                <li><a href="/faq/instructions">使用说明</a></li>
                <li><a href="/faq">FAQ</a></li>
            </ul>
        </div>
    </div> -->
    
</div>
</div>
  

</div>

  
    <script>
        /* 
          所有商品接口
          get
          参数
          pagesize  每页获取几个数据
          pagenum   获取第几页数据
          uid       用户id
          http://jx.xuzhixiang.top/ap/api/allproductlist.php?pagesize=20&pagenum=4
        */

        let pagesize=10;
        let pagenum=0;
        // 用户id
        let id=localStorage.getItem("id");
        let token=localStorage.getItem("token");
        laodList();
        // 封装 加载商品列表的函数   页面一开始需要加载商品列表    发布了商品列表更新
        function laodList(){
            let listAPI="http://jx.xuzhixiang.top/ap/api/allproductlist.php";
            axios.get(listAPI,{params:{pagesize,pagenum,uid:id,}})
            .then((r)=>{
            console.log(r.data);
            // 商品数组
            let productArr=r.data.data;

            // 根据商品数组--拼接字符串 给ul
            let str="";
            productArr.forEach(pObj=>{
                str+=`
                <li>
                  <a href="item.html?id=${pObj.pid}"><img src="${pObj.pimg}" alt="">
                    <p>${pObj.pname}</p>
                    <p>${pObj.pdesc}</p>
                    </a>
                    <p>${pObj.pprice}</p>
                    <a href="item.html?id=${pObj.pid}">加入购物车</a>
                    
                </li>
                `
            });
            document.querySelector(".goodslist ul").innerHTML=str;
        })
        }
        /*     接口地址：  http://jx.xuzhixiang.top/ap/api/goods/goods-add.php
         接口请求方式：get
         接口参数：
        1.

        pimg 2.
        pname 3.
        pprice 4.
        pdesc 5.
        uid （可选）用户商品

         使用方式  post 请求，参数在请求体 */

         let ipts=document.querySelectorAll("input");
         ipts[4].onclick=function(){
         let pimg=ipts[0].value;
         let pname=ipts[1].value;
         let pprice=ipts[2].value;
         let pdesc=ipts[3].value;
         let addProductAPI="http://jx.xuzhixiang.top/ap/api/goods/goods-add.php"
         axios.get(addProductAPI,{
             params:{
             pimg,
             pname,
             pprice,
             pdesc,
             uid:id,
            }
         }).then((r)=>{
             console.log(r.data);
            //  发布成功加载商品列表
             laodList();
         })
         }


         /* 
             接口地址：    http://jx.xuzhixiang.top/ap/api/goods/goods-delete.php
         接口请求方式：get
         接口参数：

                pid（必选）商品的id
                uid（必选）用户的id
                 token（必选）登陆时候返回的token

                  使用方式
                 http://jx.xuzhixiang.top/ap/api/goods/goods-delete.php?pid=2459

         服务器返回json数据
         */
        //  删除函数
        // async function delProduct(pid){
        //     console.log(pid);
        //     // 准备删除接口参数
        //     let params={pid,uid:id,token};
        //     console.log(params);
        //     let productDelteAPI="http://jx.xuzhixiang.top/ap/api/goods/goods-delete.php";
        //     let res=await axios.get(productDelteAPI,{params});
        //     console.log(res.data);
        //     laodList();
        // }
         

    </script>
</body>
</html>